<!--组件结构的地方-->
<template>
  <div>
    <div class="box">
      <Header />
      <Main />
      <Footer />
    </div>
    <div class="box">
    <Carousel/>
    </div>
  </div>
</template>

<!--JS区域-->
<script>
//引入子组件
import Header from "./components/todo/Header.vue";
import Main from "./components/todo/Main.vue";
import Footer from "./components/todo/Footer.vue";
import Carousel from "./components/Carousel.vue"
//对外默认暴露暴露组件配置项
export default {
  //决定了组件在开发者工具中显示名字
  name: "app",
  //注册子组件
  components: {
    Header,
    Main,
    Footer,
    Carousel
  },
};
</script>


<style scoped>
.box {
  width: 300px;
  border: 1px solid #000;
  border-radius: 4px;
  margin: 0 auto;
  padding: 10px;
}
</style>
<style>
* {
  margin: 0;
  padding: 0;
}
</style>

